<template>
   <ul class="detail-box">
      <li v-for="goods in goodslist" :key="goods.id"> 
         <img :src="goods.img"/>
         <p class="title">{{goods.name}}</p>
         <p class="price">￥{{goods.price}}</p>
      </li>
  </ul>
</template>

<script>
import axios from "axios";

export default {
   name:"Detail",
   data(){
    return{
      goodslist:[]
    }
   },
   created(){
    axios({
      url:"http://localhost:3000/goods",
    })
    .then(res=>{
      this.goodslist = res.data;
    })
    .catch(err=>{
      console.log("err",err);
    })
   }
}
</script>

<style>
  .detail-box{
    width: 100%;
    font-size: 14px;
    column-count:2;
    column-gap:5px;
  }
  .detail-box li{
    width: 100%;
    text-align: center;
    /*防止断层的*/
    break-inside: avoid;
  }
  .detail-box li img{
    width: 90%;
  }
  .title{
    /* 多行文本的省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
    overflow: hidden;
    /* 设置省略号的 */
    text-overflow: ellipsis;
    text-align: left;
  }
  .price{
    text-align: left;
  }
</style>